<template>
  <div class="app-container">
    <!-- <el-card class="box-card">
      <h3>概况</h3>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">销售数量</el-col>
          <el-col :span="4" class="table-cell-title">正常（占比）</el-col>
          <el-col :span="4" class="table-cell-title">未使用（占比）</el-col>
          <el-col :span="4" class="table-cell-title">总余额</el-col>
          <el-col :span="4" class="table-cell-title">总消费</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{ gift.numbers }}</el-col>
          <el-col :span="4" class="table-cell">{{ typeMap[gift.type] }}</el-col>
          <el-col :span="4" class="table-cell">{{ gift.desc  }}</el-col>
          <el-col :span="4" class="table-cell">{{ gift.desc  }}</el-col>
          <el-col :span="4" class="table-cell">{{ gift.desc  }}</el-col>
        </el-row>
      </div>
    </el-card> -->

    <el-card class="box-card">
      <!-- <h3>用户购买详情</h3> -->

      <!-- 查询操作 -->
      <!-- <div class="filter-container">
       <el-form :inline="true" :model="listQuery" class="demo-form-inline">
                <el-form-item :label="礼物卡编号">
            <el-input v-model="listQuery.userName" :placeholder="请输入礼物卡编号"></el-input>
            </el-form-item>
            <el-form-item :label="会员账号">
                <el-input v-model="listQuery.userName" :placeholder="请输入会员账号"></el-input>
            </el-form-item>
              <span class="demonstration daytime">默认</span>
     <el-date-picker
      v-model="listQuery.addTime"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
              <el-form-item :label="状态" >
    <el-select v-model="listQuery.status" :placeholder="状态">
      <el-option :label="新增" value="0"></el-option>
      <el-option :label="已上架" value="1"></el-option>
      <el-option :label="已下架" value="2"></el-option>
    </el-select>
  </el-form-item>

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </el-form>
      </div> -->
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="userList" :element-loading-text="$t('Searching')" border fit
                highlight-current-row>
        <el-table-column align="center" :label='$t("用户账号")' prop="addUserName">
        </el-table-column>
        <el-table-column align="center" :label='$t("礼物卡编号")' prop="cardNo">
        </el-table-column>
        <el-table-column align="center" :label="$t('操作类型')" prop="type">
          <template slot-scope="scope">
            <el-tag :type="getTypeInfo(scope.row.type).tagType">
              ${{ getTypeInfo(scope.row.type).label }}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column align="center" :label='$t("金额")' prop="amount">
          <template slot-scope="scope">
            <span>${{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("订单来源")' prop="amount">
          <template slot-scope="scope">
            <span>{{ scope.row.orderSource==1?$t("APP"):$t("POS") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label='$t("时间")' prop="consumeTime"/>
        <el-table-column align="center" :label='$t("备注")' prop="content"/>

      </el-table>
      <pagination v-show="userTotal>0" :total="userTotal" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getUserList"/>
    </el-card>

    <!-- 绑定实物卡对话框
    <el-dialog :visible.sync="bindDialogVisible" title='$t("绑定实物卡")'>
      <el-form ref="feedbackForm" :model="bindForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item :label='$t("实物卡号")' prop="reply">
          <el-input v-model="bindForm.entityCardCode"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindDialogVisible = false">{{$t('Cancel')}}</el-button>
        <el-button type="primary" @click="doBind">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {comsuptionDetails, statisticTotal} from "@/api/gift";
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: "cardStatisticsdetails",
  components: {Pagination},
  data() {

    return {
      formInline: {
        giftCardUserId: this.$route.query.allData,
      },
      // typeMap,
      gift: {},
      userList: [],
      userTotal: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        giftCardUserId: this.$route.query.allData,
        userName: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      bindDialogVisible: false,
      bindForm: {
        id: undefined,
        entityCardCode: undefined
      }
    }
  },
  created() {
    //   this.getDetail()
    this.getUserList()
  },
  methods: {
    getTypeInfo(type) {
      const typeMap = {
        1: { label: '充值', tagType: 'success' },
        2: { label: '消费', tagType: 'danger' },
        3: { label: '转出', tagType: 'warning' },
        4: { label: '转入', tagType: 'info' },
        5: { label: '赠送', tagType: 'success' },
        6: { label: '领取', tagType: 'warning' },
        8: { label: '退款', tagType: 'danger' }
      };
      return typeMap[type] || { label: '未知', tagType: '' };
    },
    getUserList() {
      this.listLoading = true
      comsuptionDetails(this.listQuery)
        .then(response => {
          this.userList = response.data.data.list
          this.userTotal = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.userList = []
          this.userTotal = 0
          this.listLoading = false
        })
    },
    //   getDetail(){
    //     let id = this.$route.query.id
    //     statisticTotal(id).then(responnse=>{
    //       this.gift = responnse.data.data
    //     })
    //   },
    //   handleFilter(){
    //     this.getUserList()
    //   },
    //   handleBack(){
    //     this.$router.push({path: '/promotion/giftcard'})
    //   },
    //   handleBind(row){
    //     this.bindDialogVisible = !this.bindDialogVisible
    //     this.bindForm.id = row.id
    //     this.bindForm.entityCardCode = undefined
    //   },


  }
}
</script>

<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.daytime {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}
</style>
